/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2017-03-10 10:39:48
 * @version $Id$
 */

//自定义下拉


function Jslide(ele) {

    $(ele).siblings('ul').slideToggle();
    var oSpan = $(ele).children('.site-menu-arrow');
    if ($(oSpan).hasClass('icon-angle-right')) {
        $(oSpan).removeClass('icon-angle-right').addClass('icon-angle-down');
    } else {
        $(oSpan).removeClass('icon-angle-down').addClass('icon-angle-right');
    }
    $(ele).parent().siblings('li').children('ul').slideUp();
    $(ele).parent().siblings('li').children('a').children('.site-menu-arrow').removeClass('icon-angle-down').addClass('icon-angle-right');

    return false
}

//定义全局方法
function App() { };
App.prototype = {
    d: function (str) {
        var ele = document.querySelectorAll(str);
        if (ele.length > 1) {
            return ele;
        } else {
            return document.querySelector(str);
        }
    },
    /***
     **str 传入需要验证的字符串
     **type 传入需要验证的类型ip，phone,directory(目录长度)，port(端口)
     **返回布尔值
     */
    regEx: function (str, type) {
        // var str=str.trim();
        var bool = null;
        switch (type) {
            case 'ip':
                var ipRegEx = /^\d+\.\d+\.\d+\.\d+$/;
                bool = ipRegEx.test(str);
                break
            case 'phone':
                var phoneRegEx = /^0?1[3|4|5|8][0-9]\d{8}$/;
                bool = phoneRegEx.test(str);
                break
            case 'directory':
                str < 255 ? bool = true : bool = false;
            case 'port':
                var portRegEx = /^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5])$/;
                bool = portRegEx.test(str);
                break
        }
        return bool;
    },
    //检测是否存在某节点
    exist: function (ele) {
        if (ele !== null && typeof ele == "object") {
            return true;
        }
        return false;
    },
    //debug切换模态框是input提示框还在
    debugPrompt: function () {
        var that = this;
        if (that.exist(document.querySelector('#prompt'))) {
            that.removePrompt()
        }
    },
    //自定义提示框ele:input节点，info:提示信息
    promptOne: function (ele, info) {
        var that = this;
        ele.onfocus = function () {
            that.removePrompt();
        }
        if (!this.exist(document.querySelector('#prompt'))) {
            var newEle = document.createElement('div');
            newEle.id = 'prompt';
            if (!info) {
                var info = '内容不能为空!';
            }
            var strHtml = "<span class=\'glyphicon glyphicon-pencil\'></span>&nbsp;" + info + "<span style=\'position:absolute; top:-10px; left:20px; border-left:transparent solid 10px; border-right:transparent solid 10px; border-bottom:#337ab7 solid 10px; width:0px; height:0px; display:block;\'></span>"
            newEle.innerHTML = strHtml;
            ele.parentNode.appendChild(newEle);
        } else {
            var oldEle = document.querySelector('#prompt');
            oldEle.parentNode.removeChild(oldEle);
            var newEle = document.createElement('div');
            newEle.id = 'prompt';
            if (!info) {
                var info = '内容不能为空!';
            }
            var strHtml = "<span class=\'glyphicon glyphicon-pencil\'></span>&nbsp;" + info + "<span style=\'position:absolute; top:-10px; left:20px; border-left:transparent solid 10px; border-right:transparent solid 10px; border-bottom:#337ab7 solid 10px; width:0px; height:0px; display:block;\'></span>"
            newEle.innerHTML = strHtml;
            ele.parentNode.appendChild(newEle);
        }
    },
    //给所有input定义不能为空提示框传入input节点的集合
    prompt: function (oText) {
        var that = this;
        for (var i = 0; i < oText.length; i++) {
            if (oText[i].value == '') {
                if (!that.exist(document.querySelector('#prompt'))) {
                    that.promptOne(oText[i]);
                }
            }
            oText[i].onfocus = function () {
                that.removePrompt();

            }
        };
    },
    removePrompt: function () {
        if (this.exist(document.querySelector('#prompt'))) {
            var oldEle = document.querySelector('#prompt');
            oldEle.parentNode.removeChild(oldEle);
        }
    },
    /*弹窗*/
    alert: function (info, callback) {
        var that = this;
        if (that.exist(document.querySelector('#zhezao'))) {
            return
        };
        var zhezao = document.createElement('div');
        zhezao.id = 'zhezao';
        zhezao.style.width = '100%';
        zhezao.style.height = '100%';
        zhezao.style.background = 'rgba(0,0,0,0.4)';
        zhezao.style.zIndex = '99998';
        zhezao.style.top = '0px';
        zhezao.style.left = '0px';
        zhezao.style.position = 'fixed';
        var shield = document.createElement("DIV");
        shield.id = "shield";
        shield.style.position = "fixed";
        shield.style.left = "50%";
        shield.style.top = "50%";
        shield.style.width = "280px";
        shield.style.height = "150px";
        shield.style.marginLeft = "-140px";
        shield.style.marginTop = "-110px";
        shield.style.zIndex = "25";
        var alertFram = document.createElement("DIV");
        alertFram.id = "alertFram";
        alertFram.style.position = "fixed";
        alertFram.style.width = "280px";
        alertFram.style.height = "150px";
        alertFram.style.left = "50%";
        alertFram.style.top = "50%";
        alertFram.style.marginLeft = "-140px";
        alertFram.style.marginTop = "-110px";
        alertFram.style.textAlign = "center";
        // alertFram.style.lineHeight = "150px";
        alertFram.style.zIndex = "99999";
        strHtml = "<div style=\'width:100%;height:100%; font-weight:bolder; border-radius:5px; background:#fff; border:1px solid #e5e5e5\'>" +
            "  <div style=\'height:32px; width:100%; line-height:32px;\'>提示信息</div>" +
            "  <div style=\'border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; width:100%; height:84px;\'><p style='margin-top:30px'>" + info + "</p></div>" +
            "  <div style=\'height:32px; width:100%; line-height:32px;\'><button style=\'border:none; background:#337ab7; color:#fff; border-radius:5px; margin:0 auto; width:60px;\' onclick='doOk()'>确定</button></div>" +
            "</div>";
        alertFram.innerHTML = strHtml;
        document.body.appendChild(alertFram);
        document.body.appendChild(shield);
        document.body.appendChild(zhezao);
        window.doOk = function () {
            $('#alertFram').hide();
            $('#shield').hide();
            $('#zhezao').hide();
            document.body.removeChild(alertFram);
            document.body.removeChild(shield);
            document.body.removeChild(zhezao);
            if (callback) {
                callback();
            }
        }
        alertFram.focus();
        // document.body.onselectstart = function(){return false;};
    },

    //运动框架
    startMove: function (obj, json, fn) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var bStop = true;
            for (attr in json) {
                // 1. 取得当前的值（可以是width，height，opacity等的值）  
                var objAttr = 0;
                if (attr == "opacity") {
                    objAttr = Math.round(parseFloat(getStyle(obj, attr)) * 100);
                } else {
                    objAttr = parseInt(getStyle(obj, attr));
                };
                // 2.计算运动速度  
                var iSpeed = (json[attr] - objAttr) / 10;
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                // 3. 检测所有运动是否到达目标  
                if (objAttr != json[attr]) {
                    bStop = false;
                };
                if (attr == "opacity") {
                    obj.style.filter = 'alpha(opacity:' + (objAttr + iSpeed) + ')';
                    obj.style.opacity = (objAttr + iSpeed) / 100;
                } else {
                    obj.style[attr] = objAttr + iSpeed + 'px'; // 需要又.属性名的形式改成[]  
                };
            };
            if (bStop) { // 表示所有运动都到达目标值  
                clearInterval(obj.timer);
                if (fn) {
                    fn();
                }
            };
        }, 30);
        //获取样式
        function getStyle(obj, attr) {
            return getComputedStyle ? getComputedStyle(obj, false)[attr] : obj.currentStyle[attr];
        }
    },
    //cpu图
    cpuChart: function (cpuTime, data1, data2, data3, data4) {
        var myChart = echarts.init(document.getElementById('cpuState'));
        option = {
            title: {
                text: 'cpu使用率',
                textStyle: {
                    fontSize: 12
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['IO wait', 'System', 'User', 'Cpu'],
                top: 25,
                left: 0
            },
            toolbox: {
                show: true,
                x: '80%',
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                data: cpuTime,
                axisLabel: {
                    interval: 1
                }
            }],
            yAxis: [{
                type: 'value'
            }],
            //color:['#4CC168','#D1BD5F','#35A5ED',##35A7ED],
            series: [

                {
                    name: 'IO wait',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {
                        normal: {}
                    }, //面积
                    data: data1
                },
                {
                    name: 'System',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {
                        normal: {}
                    }, // 面积
                    data: data2
                },
                {
                    name: 'User',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {
                        normal: {}
                    }, //面积
                    data: data3
                },
                {
                    name: 'Cpu',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {
                        normal: {}
                    }, //面积
                    itemStyle: {
                        normal: {
                            color: "#2ec7c9",
                            lineStyle: {
                                color: "#2ec7c9"
                            }
                        }
                    },
                    data: data4
                },

            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    },
    /*======= Average load (cpu负荷)=========*/
    AverageChart: function (loadTime, loadData, title) {
        var myChart = echarts.init(document.getElementById('average'));
        option = {
            title: {
                text: title,
                textStyle: {
                    fontSize: 12
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['Load'],
                top: 25,
                left: 0
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                show: true,
                x: '60%',
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: loadTime,
                axisLabel: {
                    interval: 2,
                    rotate: 20
                }
            },
            yAxis: {
                type: 'value',
            },
            color: ['#4CC168'],
            series: [{
                name: 'Load',
                type: 'line',
                stack: '总量',
                data: loadData
            }

            ]
        };



        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    },
    /*==========  内存使用/网络使用  ==========*/
    memoryChart: function (nodeId, memoryTime, kedu, dushu, memorydata1, memorydata2, title, name1, name2) {
        var myChart = echarts.init(document.getElementById(nodeId));
        var saveImg;
        if (dushu > 0) {
            saveImg = '70%'
        } else {
            saveImg = '80%'
        }
        option = {
            title: {
                text: title,
                textStyle: {
                    fontSize: 12
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: [name1, name2],
                top: 25,
                left: 0,
                itemGap: 2,
                itemWidth: 10,
                itemHeight: 10,
            },
            toolbox: {
                show: true,
                x: saveImg,
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [

                {
                    type: 'category',
                    boundaryGap: false,
                    data: memoryTime,
                    axisLabel: {
                        interval: kedu,
                        rotate: dushu
                    }
                }
            ],
            yAxis: [{
                type: 'value',
            }],
            //color:['#4CC168','#D1BD5F'],
            series: [

                {
                    name: name1,
                    type: 'line',
                    stack: '总量',
                    areaStyle: {
                        normal: {}
                    },
                    data: memorydata1
                },
                {
                    name: name2,
                    type: 'line',
                    stack: '总量',
                    areaStyle: {
                        normal: {}
                    },
                    data: memorydata2
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    },
    /*========= 磁盘使用 ==========*/
    storage: function (storageTime, series, name) {
        var myChart = echarts.init(document.getElementById('storage'));
        var option = {
            title: {
                text: '磁盘使用',
                textStyle: {
                    fontSize: 12
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: name,
                top: 25,
                left: 0,
                itemGap: 2,
                itemWidth: 10,
                itemHeight: 10,
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                show: true,
                x: '60%',
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: storageTime,
                axisLabel: {
                    interval: 2,
                    rotate: 20
                }
            },
            yAxis: {
                type: 'value'
            },
            //color:['#4CC168','#D1BD5F','#35A5ED','#a495c5'],
            series: series
        };
        myChart.setOption(option);
    },
    //===========扇形饼图==========//
    roundChart: function (nodeId, data1, data2, title) {
        var myChart = echarts.init(document.getElementById(nodeId));
        option = {
            title: {
                text: title,
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                right: 100,
                top: 50,
                bottom: 20,
                data: data1
            },
            series: [{
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['30%', '50%'],
                data: data2,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        myChart.setOption(option);
    },

    //==========条形统计图=========//
    shapeChart: function (nodeId, data1, data2, title, fails) {
        var myChart = echarts.init(document.getElementById(nodeId));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: title,
                x: 'center',
                textStyle: {
                    fontSize: 16,
                }
            },
            tooltip: {},
            dataZoom: [
                {
                    type: 'slider',
                    show: true,
                    start: 10,
                    end: 100,
                    handleSize: 8
                },
                {
                    type: 'inside',
                    start: 90,
                    end: 100
                },
                {
                    type: 'slider',
                    show: true,
                    yAxisIndex: 0,
                    filterMode: 'empty',
                    width: 12,
                    height: '70%',
                    handleSize: 8,
                    showDataShadow: false,
                    left: '93%'
                }],
            xAxis: {
                data: data1,
                max: 20
            },
            yAxis: {},
            series: [{
                name: fails,
                type: 'bar',
                itemStyle: {
                    color: '#00FF33',
                },
                data: data2,
                barCateGoryGap: 20,
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    },

    //=============多项条形统计图=============//
    barShapeChart: function (nodeId, data1, data2, data3, title) {
        var myChart = echarts.init(document.getElementById(nodeId));
        option = {
            title: {
                text: title
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                align: 'left',
                top: 30,
                data: data1
            },
            toolbox: {
                show: true,
            },
            calculable: true,
            dataZoom: [
                {
                    type: 'slider',
                    show: true,
                    start: 10,
                    end: 100,
                    handleSize: 8
                },
                {
                    type: 'inside',
                    start: 90,
                    end: 100
                },
                {
                    type: 'slider',
                    show: true,
                    yAxisIndex: 0,
                    filterMode: 'empty',
                    width: 12,
                    height: '70%',
                    handleSize: 8,
                    showDataShadow: false,
                    left: '93%'
                }],
            xAxis: [
                {
                    type: 'category',
                    data: data2,
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: data3
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

};